import React, { useEffect, useState } from 'react';
import { Drawer, Button } from '@alifd/next';
import TauActionPanel from '@/components/TauActionPanel';
import { t } from '@lingui/macro';
import TauTable from '@/components/TauTable';
import DrawerFooter from '@/components/DrawerFooter';
import { ENUMS, column, toSelectDataSource } from '../../stores/definitions_actives';
import { useStore } from '@/hooks';
import { uniqueId } from 'lodash';
import { observer } from 'mobx-react-lite';

const tableId = uniqueId('tauTable-');

const title = {
  CLICK: t`查看点击详情`,
  ORDER: t`查看订单详情`,
  REGISTER: t`查看拉新详情`,
};

const Index = ({ data, modal, onCancel }) => {
  const {
    scene,
    activeType,
    inviteCode,
  } = data || {};
  const { sceneStore: store } = useStore();
  // 获取列表数据
  const handleOnSearch = (params) => {
    const { upDate, ...searchArgs } = params.values;
    const [from, to] = upDate || [];
    store.search_actives = {
      from,
      to,
      scene,
      activeType,
      source: inviteCode,
      ...searchArgs,
    };
  };

  return (
    <>
      <Drawer
        visible={modal[0] == 'actives'}
        title={title[activeType]}
        style={{ maxWidth: '90%' }}
        closeMode={['esc', 'mask', 'close']}
        onClose={() => onCancel()}
        width="75%"
      >
        <TauActionPanel
          onSearch={handleOnSearch}
          searchItems={[
            {
              name: 'upDate',
              type: 'date-range',
              props: {
                placeholder: [t`开始创建时间`, t`结束创建时间`],
              },
            },
          ]}
          keywordSearch={{
            // enabled: true,
            placeholder: t`请输入关键字搜索`,
          }}
          className="action-panel"
        />
        <div className="content">
          <TauTable
            instanceId={tableId}
            primaryKey="id"
            tableLayout="fixed"
            currentPage={store.pg_actives.page}
            pageSize={store.pg_actives.size}
            total={store.total_actives}
            sort={store.tableSort}
            onFetch={(pg) => { store.pg_actives = pg; }}
            loading={store.loading_actives}
            dataSource={toJS(store.actives)}
            columns={[
              { title: t`序号`, dataIndex: 'idx', width: 44, cell: (v, i) => store.idx_actives(i) },
              column('id', {
                width: 200,
              }),
              column('fullName', {
                width: 100,
              }),
              column('source', {
                width: 100,
              }),
              column('otherInfo', {
                width: 180,
              }),
              column('crDate', {
                width: 148,
              }),
              // {
              //   title: t`操作`,
              //   dataIndex: 'activityNumber',
              //   width: 138,
              //   cell: (_, i, coupon) => {
              //     const funcMenu = [
              //       {
              //         title: '编辑',
              //         onClick: () => handleOpenEdit(coupon),
              //         show: true,
              //       },
              //       {
              //         title: '删除',
              //         onClick: () => handleRemoveActivity(coupon),
              //         color: 'red',
              //         show: true,
              //       },
              //     ];
              //     return (
              //       <MoreFuncDropDown
              //         dropdownItems={funcMenu}
              //         maxShow={2}
              //       />
              //     );
              //   },
              // },
            ]}
          />
        </div>
        <DrawerFooter>
          <Button style={{ marginLeft: 8 }} onClick={onCancel}>{t`取消`}</Button>
        </DrawerFooter>
      </Drawer>
    </>
  );
};

export default observer(Index);
